<!DOCTYPE html>
<html lang="zh-CN" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>2015.11.16</title>
    <link rel="stylesheet" href="../css/bootstrap.css "/>

</head>
<body class="home-template" style="text-align:center">
<div class="container masthead">
<div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/codeguide.png" alt="Headroom.js" height="150" width="300">
        <div class="caption">
            <h3>
            Bootstrap 编码规范<br><small>by @mdo</small>
            </h3>
        <p>
            Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。
        </p>
        </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/jqueryapi.png" alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    jQuery API<br><small>中文手册</small>
                </h3>
                <p>
                    根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/opencdn.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Open CDN<br><small>开放CDN服务</small>
                </h3>
                <p>
                    Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/expo.png" alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    优站精选<br><small>Bootstrap网站实例</small>
                </h3>
                <p>
                    Bootstrap优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/gulpjs.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    gulp.js<br><small>基于流的自动化构建工具。</small>
                </h3>
                <p>
                    gulp.js - 基于流(stream)的自动化构建工具。Grunt 采用配置文件的方式执行任务，而 Gulp 一切都通过代码实现。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/lesscss.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    LESS<br><small>一种动态样式语言</small>
                </h3>
                <p>
                    LESS为CSS赋予了动态语言的特性，如变量、继承、运算、函数。LESS既可以在客户端上运行 (支持IE 6+、Webkit、Firefox)，也可以借助Node.js或者Rhino在服务端运行。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/gruntjs.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Grunt<br><small>项目构建工具</small>
                </h3>
                <p>
                    Grunt是基于Node.js的项目构建工具。它可以自动运行你所设定的任务。Grunt拥有数量庞大的插件，几乎任何你所要做的事情都可以用Grunt实现。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/underscore.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Underscore.js<br><small>JavaScript 工具库</small>
                </h3>
                <p>
                    Underscore.js是一个 JavaScript 工具库，它提供了一整套函数式编程的实用功能，弥补了 jQuery 没有实现的功能，同时又是 Backbone 必不可少的部分。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/buttons.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Buttons<br><small>CSS按钮样式库</small>
                </h3>
                <p>
                    Buttons 是一个基于 Sass 和 Compass 构建的CSS按钮（button）样式库，图标采用的是Font Awesome，可以和Bootstrap融合使用。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/stickup.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    stickUp<br><small>让页面元素“固定”位置</small>
                </h3>
                <p>
                    stickUp能让页面目标元素“固定”在浏览器窗口的顶部，即便页面在滚动，目标元素仍然能出现在设定的位置。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/responsive-nav.js.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Responsive Nav <br><small>响应式导航</small>
                </h3>
                <p>
                    响应式导航（Responsive Nav）是一个很小的JS插件，压缩之后仅有1.7KB，能帮你创建针对小屏幕的可切换式导航
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/unslider.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Unslider <br><small>jQuery轮播插件</small>
                </h3>
                <p>
                    Unslider — 一个超小的 jQuery 轮播（slider） 插件。支持主流浏览器、键盘导航、自动调整高度和响应式布局。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/flat-ui.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Flat UI  <br><small>Metro风格的Bootstrap</small>
                </h3>
                <p>
                    Flat UI是基于Bootstrap做的Metro化改造，由Designmodo提供。Flat UI包含了很多Bootstrap提供的组件，但是外观更加漂亮。在此强烈推荐！
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/layoutit.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    LayoutIt!<br><small>Bootstrap可视化布局</small>
                </h3>
                <p>
                    LayoutIt! 可拖放排序在线编辑的Bootstrap可视化布局系统。由4wer同学汉化整理。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/bootstrap-switch.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Bootstrap Switch<br><small>Bootstrap开关组件</small>
                </h3>
                <p>
                    Bootstrap Switch是对Bootstrap控件的扩充。基于选HTML中基本的选择框控件实现只有开和关两种状态的单选按钮。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/sco.js.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Sco.js<br><small>Bootstrap组件增强版</small>
                </h3>
                <p>
                    由于大部分的Bootstrap js插件是无法扩展的，因此才有了sco.js，它是对Bootsrap中js插件的增强实现。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/icheck.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    iCheck<br><small>增强复选框和单选按钮</small>
                </h3>
                <p>
                    iCheck让不同浏览器下的复选框（checkboxes）和单选按钮（radio button）更美观、功能更强。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/bootstrap-wysiwyg.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    bootstrap-wysiwyg<br><small>为Bootstrap定制的可视编辑器</small>
                </h3>
                <p>
                    bootstrap-wysiwyg是一个jQuery Bootstrap插件（5KB, < 200 行代码）可以将任何一个DIV转变成一个WYSIWYG富文本编辑器。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/chart.js.png" alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Chart.js<br><small>精巧的JS图表绘制工具库</small>
                </h3>
                <p>
                    Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/preboot.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Preboot<br><small>Bootstrap之前世</small>
                </h3>
                <p>
                    Preboot是一组用LESS语法书写的混合（mixin）和变量（variable）的集合，目的是辅助用户书写更优美的CSS。Bootstrap的前身就是Preboot。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/jquery.pin.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    jQuery.Pin<br><small>固定页面元素的jQuery插件</small>
                </h3>
                <p>
                    jQuery.Pin 能将任意页面元素“钉”在某个容器顶部，而且在尺寸小的屏幕上能够自动禁用这种效果。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/bsie.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Bsie<br><small>Bootstrap IE6兼容方案</small>
                </h3>
                <p>
                    Bsie弥补了Bootstrap对IE6的不兼容。目前，bsie能在IE6上支持大部分bootstrap的特性，可惜，还有一些实在无法支持...
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/messenger.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Messenger<br><small>非常酷的弹框(Alert)组件</small>
                </h3>
                <p>
                    Messenger是一个非常酷的弹框(Alert)组件，能够非常好的与Bootstrap融合，当然，单独使用效果也是非常棒。Messenger自带4套皮肤。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/bootstrap-datetimepicker.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    DateTime Picker<br><small>日期时间选择器</small>
                </h3>
                <p>
                    Bootstrap日期时间选择器（Bootstrap DateTime Picker）是一个Bootstrap组件，能够简化页面上日期、时间的输入。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/jquery-ui-bootstrap.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    jQuery UI Bootstrap <br><small>用Bootstrap美化jQuery UI</small>
                </h3>
                <p>
                    这套工具让你在使用jQuery UI 控件时也能充分利用Bootstrap的样式，而且不会出现样式不统一的现象，Bootstrap和jQuery UI可以完美融合在一起了！
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/google-bootstrap.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Google Bootstrap <br><small>Google风格的Bootstrap</small>
                </h3>
                <p>
                    Google的UI素来以简洁著称，现在Bootstrap也来Google Style一把，喜欢Google的就来试试这套Google Bootstrap吧！
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/metro-ui-css.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Metro UI CSS <br><small>Bootstrap与Metro融合</small>
                </h3>
                <p>
                    Metro UI CSS 是一套用来创建类似于Windows 8 Metro UI风格网站的样式。现在，Metro UI CSS项目在Bootstrap的基础上被开发成一个独立的解决方案。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/font-awesome.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Font Awesome <br><small>Bootstrap专用图标字体</small>
                </h3>
                <p>
                    Font Awesome 中包含的所有图标都是矢量的，也就可以任意缩放，避免了一个图标做多种尺寸的麻烦。CSS对字体可以设置的样式也同样能够运用到这些图标上了。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/simpleicons.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Simple Icons<br><small>Icon汇</small>
                </h3>
                <p>
                    Simple Icons -- Icon汇。收集众多网站的Logo，并提供高质量、不同尺寸的png格式图片给广大网友，所有Icon版权归其所属公司。
                </p>
            </div>
        </div>
    </div>


    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/bootstrap-form-builder.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Bootstrap Form Builder<br><small>在线表单构造器</small>
                </h3>
                <p>
                    Bootstrap 在线表单构造器能够以鼠标拖拽的方式迅速生成一个基于Bootstrap的完整表单，减轻了各位码农手写HTML代码的劳动，而且不会出错。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/h5bp.png" alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    HTML5 Boilerplate<br><small>专业的前端模版</small>
                </h3>
                <p>
                    HTML5 Boilerplate 是一套专业的前端模版，用以开发快速、健壮、适应性强的app或网站。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/websafecolors.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Web Safe Colors<br><small>Web安全色</small>
                </h3>
                <p>
                    本表中列出的是WEB设计、开发中常用安全色。列于此是为了方便大家参考。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/bootstrap-docs.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Bootstrap Docs<br><small>Bootstrap文档全集</small>
                </h3>
                <p>
                    这里收集了Bootstrap从V1.0.0版本到现在，整个文档的历史。Bootstrap本身就是一个传奇，而这些文档就是传奇的见证！
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/git-guide.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Git Guide<br><small>Git简易指南</small>
                </h3>
                <p>
                    Git简易指南 -- 帮助你开始使用 git 的简易指南，木有高深内容，;)。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/grumblejs.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Grumble.js<br><small>气泡形状的提示（Tooltip）控件</small>
                </h3>
                <p>
                    一个气泡形状的提示（Tooltip）控件，可以在其围绕的元素周围做360度任意定位。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/cikonss.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    CIKONSS<br><small>纯CSS实现的Icon</small>
                </h3>
                <p>
                    Cikonss是纯CSS实现的响应式Icon，兼容IE8+。
                </p>
            </div>
        </div>
    </div>

    <div class="col-sm-6 col-md-4 col-lg-3">
        <div style="height: 336px;" class="thumbnail">
            <img class="lazy" src="../img/11.16/headroom.png " alt="Headroom.js" height="150" width="300">
            <div class="caption">
                <h3>
                    Headroom.js<br><small>隐藏或展示页面元素</small>
                </h3>
                <p>
                    Headroom.js 是一个轻量级、纯 JavaScript 组件，用来隐藏或展现页面上的元素，为你的页面留下更多展示内容的空间。
                </p>
            </div>
        </div>
    </div>

</div>
</div>
</body>
</html>